<!--
 * @Description:基础信息配置
-->

<template>
  <div class="appMainWarp BasicInfoConfig">
    <el-form ref="addModel" label-width="150px">
      <el-form-item label="医院名称:" prop="hospitalName">
        <el-input
          v-model="hospitalName"
          placeholder="请输入医院名称"
          autocomplete="off"
          style="width:400px;"
        />
      </el-form-item>
      <el-form-item label="医院LOGO:" prop="hospitalLogo">
        <el-upload
          class="avatar-uploader"
          :action="url"
          :accept="$store.getters.uploadAccept"
          :headers="{ cmstoken: $store.getters.token }"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <div
            v-if="hospitalLogo"
            class="img-box"
          >
            <img :src="hospitalLogo" class="avatar">
            <i class="el-icon-circle-close img-close" @click.stop="handleRemove()" />
          </div>
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveHandle">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { hospiConEdit, getHospitalInfo } from '@/api/reconcliationConfig/basicInfoConfig/index'

export default {
  name: 'BasicInfoConfig',
  data() {
    return {
      id: '',
      // url: 'http://192.168.1.219:8088/rwbill2.0/public/index.php/cms/uploads',
      url: process.env.VUE_APP_BASE_API + '/cms/uploads',
      hospitalName: '',
      hospitalLogo: ''
    }
  },
  mounted() {
    this.onLoad()
  },
  methods: {
    handleRemove() {
      this.hospitalLogo = ''
    },
    handlephtotSuccess(res, file) {
      if (res.code !== 0) {
        this.$message({
          type: 'warning',
          message: res.msg
        })
        return false
      }
      this.hospitalLogo = res.data.result.url_img
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      if (res.code !== 10000) {
        this.$message({
          type: 'warning',
          message: res.msg
        })
        return false
      } else {
        this.hospitalLogo = res.data.result.url_img
      }
    },
    beforeAvatarUpload(file) {
      const isIMG =
        file.type === 'image/jpg' ||
        file.type === 'image/jpeg' ||
        file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 / 10 < 2
      if (!isIMG) {
        this.$message.error('上传图片只能是 jpg、jpeg、png 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isIMG && isLt2M
    },
    saveHandle() {
      const params = {}
      params.id = this.id
      params.hosname = this.hospitalName
      params.picture = this.hospitalLogo
      if (!params.hosname) {
        this.$message({
          type: 'warning',
          message: '医院信息名称不能为空！'
        })
        return false
      }
      // if (!params.picture) {
      //   this.$message({
      //     type: 'warning',
      //     message: '医院信息LOGO图片不能为空！'
      //   })
      //   return false
      // }
      this.updateInfo(params)
    },
    updateInfo(params) {
      const loading = this.$loading()
      hospiConEdit(params)
        .then((res) => {
          loading.close()
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.$store.dispatch('permission/sethosName')
        })
        .catch(() => {
          loading.close()
        })
    },
    onLoad() {
      this.onSearch()
    },
    onSearch() {
      var params = {}
      var that = this
      getHospitalInfo(params)
        .then(res => {
          that.id = res.data.result.id
          that.hospitalName = res.data.result.hos_name
          that.hospitalLogo = res.data.result.hos_ico_picture
        })
        .catch(() => {
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.img-box{
  position: relative;
  width: 178px;
  height: 178px;
}
.img-box .img-close{
  position: absolute;
  color: #f00;
  top: 0;
  right: 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.dialog-footer{
  margin-left: 150px;
}
</style>
